<template>
  <div>
    <p id="clickMe"></p>
    <div class="makeHeader">
      <el-row
        type="flex"
        justify="space-between"
        align="center"
        :gutter="20"
        style="width: 100%; margin-bottom: 10px"
      >
        <el-col :span="8" style="display: flex"
          ><span style="width: 100px; height: 40px; line-height: 40px">所属项目：</span>
          <el-select style="width: 100%" v-model="belongProject" placeholder="选择项目">
            <el-option
              v-for="item in projectOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option> </el-select
        ></el-col>
        <el-col :span="8" style="display: flex"
          ><span style="width: 100px; height: 40px; line-height: 40px">线别：</span>
          <el-select style="width: 100%" v-model="lineSpear" placeholder="选择线别">
            <el-option
              v-for="item in lineOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            >
            </el-option> </el-select
        ></el-col>
        <el-col :span="8" style="display: flex"
          ><span style="width: 100px; height: 40px; line-height: 40px">日期：</span
          ><el-date-picker
            style="width: 100%"
            v-model="date"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="选择开始日期"
            end-placeholder="选择结束日期"
          >
          </el-date-picker
        ></el-col>
        <el-col :span="4" style="display: flex"
          ><el-button type="primary" @click="searchHandler">查询</el-button
          ><el-button plain @click="resetHandler">重置</el-button></el-col
        >
      </el-row>
      <el-row
        type="flex"
        justify="center"
        align="center"
        style="width: 100%; margin-bottom: 10px"
      >
        <el-col :span="2" style="display: flex"
          ><el-button type="primary" @click="addHandler">新增</el-button></el-col
        >
        <el-col :span="20" style="display: flex"></el-col>
        <el-col :span="2" :pull="1" style="display: flex"
          ><span style="width: 100px; height: 40px; line-height: 40px"></span
        ></el-col>
      </el-row>
    </div>

    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
        height="720"
      >
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column prop="projectName" label="项目" width="280" align="center" />
        <el-table-column prop="fillingType" label="填报类型" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.fillingType === 0 ? "实际" : "计划" }}</span>
          </template> </el-table-column
        >>
        <el-table-column
          prop="progressType"
          label="进度类型"
          width="100"
          align="center"
        />
        <el-table-column prop="lineType" label="线别" align="center" />
        <el-table-column prop="constructionDate" label="施工日期" align="center">
        </el-table-column>
        <el-table-column label="开始里程" align="center">
          <template slot-scope="scope">
            DK{{ scope.row.startMileageKm }} +
            {{ scope.row.startMileageM === null ? "000" : scope.row.startMileageM }}
          </template>
        </el-table-column>
        <el-table-column label="结束里程" align="center">
          <template slot-scope="scope">
            DK{{ scope.row.endMileageKm }} +
            {{ scope.row.endMileageM === null ? "000" : scope.row.endMileageM }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="updateHandler(scope.row)"
              style="color: #409eff"
              >编辑</el-button
            >
            <el-button type="text" @click="deleteHandler(scope.row.id)" style="color: red"
              >删除</el-button
            >
          </template> </el-table-column
        >>
      </el-table>
    </el-row>
    <el-row class="footerDiv mt-10" style="text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <!-- 编辑 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="editTiele"
      :visible.sync="editDialogStatus"
      width="30%"
      :modal-append-to-body="false"
    >
      <el-row type="flex" justify="start" class="mgb-10">
        <div class="pDiv">所属项目:</div>
        <el-select
          class="pSelect"
          v-model="editFrom.projectId"
          placeholder="请选择"
          style="width: 430px; display: inline-block"
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-row>
      <el-row type="flex" justify="start" class="mgb-10">
        <div class="pDiv">施工日期:</div>
        <el-date-picker
          v-model="editFrom.constructionDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          style="width: 470px; display: inline-block; margin: 0"
        >
        </el-date-picker>
      </el-row>
      <el-row type="flex" justify="start" class="mgb-10">
        <div class="pDiv">开始里程:</div>
        <el-input
          v-model="editFrom.startMileageKm"
          style="width: 470px; display: inline-block"
        ></el-input>
      </el-row>
      <el-row type="flex" justify="start" class="mgb-10">
        <div class="pDiv">结束里程:</div>
        <el-input
          v-model="editFrom.endMileageKm"
          style="width: 470px; display: inline-block"
        ></el-input>
      </el-row>
      <el-row type="flex" justify="start" class="mgb-10">
        <div class="pDiv">填报类型:</div>
        <el-select
          class="pSelect"
          v-model="editFrom.fillingType"
          placeholder="请选择"
          style="width: 430px; display: inline-block"
        >
          <el-option label="实际填报" :value="0"> </el-option>
          <el-option label="计划" :value="1"> </el-option>
        </el-select>
      </el-row>
      <el-row type="flex" justify="start" class="mgb-10">
        <div class="pDiv">进度类型:</div>
        <el-select
          class="pSelect"
          v-model="editFrom.progressType"
          placeholder="选择进度类型"
          style="width: 430px; display: inline-block"
        >
          <el-option
            v-for="item in progressOptions"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-row>
      <el-row type="flex" justify="start" class="mgb-10">
        <div class="pDiv">线别类型:</div>
        <el-select
          class="pSelect"
          v-model="editFrom.lineType"
          placeholder="选择线别"
          style="width: 430px; display: inline-block"
        >
          <el-option
            v-for="item in lineOptions"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogStatus = false">取 消</el-button>
        <el-button type="primary" @click="editSaveHandler">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getConstructionProgress,
  constructionProgressDetail,
  saveConstructionProgress,
  updateConstructionProgress,
  deleteConstructionProgress,
} from "/src/http/productSchedule/constructScheduleMg.js";
import { getAllProjectList } from "/src/http/productSchedule/projectMg.js";
import { autoClick } from "/src/utils/autoClick.js";
import { getDataType } from "/src/http/dictionary.js";

export default {
  data() {
    return {
      dialogVisible: false,
      belongProject: "",
      lineSpear: "",
      date: "",
      projectOptions: [],
      lineOptions: [],
      progressOptions: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      isSearch: false,
      renderData: [],
      imageUrl: "",
      // edit
      editTiele: "",
      editDialogStatus: false,
      editFrom: {
        projectId: 1,
        fillingType: 0,
        lineType: "左线",
        progressType: "基底浇筑",
        constructionDate: "2023-10-05",
        startMileageKm: "12",
        endMileageKm: "123",
      },
    };
  },

  mounted() {
    this.getAllProjectListApi();
    this.getConstructionProgressApi();
    this.getDataTypeApi();
  },

  methods: {
    // 搜索
    searchHandler() {
      this.isSearch = true;
      this.getConstructionProgressApi(
        1,
        this.pageSize,
        this.belongProject,
        this.lineSpear,
        this.date[0],
        this.date[1]
      );
    },
    // 重置
    resetHandler() {
      this.getConstructionProgressApi();
      this.belongProject = null;
      this.lineSpear = "";
      this.date = "";
      this.isSearch = false;
    },
    renderPage() {
      this.renderData = this.tableData;
      this.total = this.renderData.length;
    },
    // 新增
    addHandler() {
      this.editTiele = "新增";
      this.editDialogStatus = true;
    },
    // 重置密码
    resetPassword(v) {
      console.log("重置密码::: ", v);
    },
    //   编辑
    updateHandler(v) {
      this.editTiele = "编辑";
      this.editDialogStatus = true;
      this.editFrom = v;
    },
    // 删除
    deleteHandler(v) {
      this.$confirm("此操作将永久删除该信息?", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteConstructionProgressApi({ idList: [v] });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      autoClick();
    },
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v;
      if (this.isSearch === true) {
        this.getConstructionProgressApi(
          this.currentPage,
          v,
          this.belongProject,
          this.lineSpear,
          this.date[0],
          this.date[1]
        );
      } else {
        this.getConstructionProgressApi(this.currentPage, v);
      }
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v;
      if (this.isSearch === true) {
        this.getConstructionProgressApi(
          v,
          this.pageSize,
          this.belongProject,
          this.lineSpear,
          this.date[0],
          this.date[1]
        );
      } else {
        this.getConstructionProgressApi(v, this.pageSize);
      }
    },
    // editDialog保存
    editSaveHandler() {
      let params = this.editFrom;
      if (this.editTiele === "新增") {
        this.saveConstructionProgressApi(params);
      } else {
        this.updateConstructionProgressApi(params); //
      }
      this.editDialogStatus = false;
    },
    /**
     * 接口
     */
    // 查询所有项目
    getAllProjectListApi() {
      getAllProjectList().then((res) => {
        if (res.code == 200) {
          this.projectOptions = res.data;
        }
      });
    },
    // 查询所有线别
    getDataTypeApi() {
      getDataType({ type: "ht_line_type" }).then((res) => {
        if (res.code == 200) {
          this.lineOptions = res.data;
        }
      });
      // 查询所有进度类型
      getDataType({ type: "progress_type" }).then((res) => {
        if (res.code == 200) {
          this.progressOptions = res.data;
        }
      });
    },
    // 分页查询施工进度
    getConstructionProgressApi(
      pageNum = 1,
      pageSize = 10,
      projectId = null,
      lineType = "",
      constructionDateStart = "",
      constructionDateEnd = ""
    ) {
      let params = {
        pageNum,
        pageSize,
        projectId,
        lineType,
        constructionDateStart,
        constructionDateEnd,
      };
      getConstructionProgress(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records;
          this.total = res.data.total;
          this.currentPage = pageNum;
        }
      });
    },
    // id查询施工进度详情
    constructionProgressDetailApi(params) {
      constructionProgressDetail(params).then((res) => {
        if (res.code == 200) {
          // console.log('res::: ', res)
        }
      });
    },
    // 保存施工进度
    saveConstructionProgressApi(params) {
      saveConstructionProgress(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("新增成功");
          let pgn =
            Number.isInteger(this.total / this.pageSize) == true
              ? this.total / this.pageSize + 1
              : Math.ceil(this.total / this.pageSize);
          this.getConstructionProgressApi(pgn, this.pageSize);
          autoClick();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 更新施工进度
    updateConstructionProgressApi(params) {
      updateConstructionProgress(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("编辑成功");
          autoClick();
        }
      });
    },
    // 删除施工进度
    async deleteConstructionProgressApi(params) {
      await deleteConstructionProgress(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          if (this.renderData.length == 1 && this.currentPage > 1) {
            if (this.isSearch === true) {
              this.getConstructionProgressApi(
                this.currentPage - 1,
                this.pageSize,
                this.belongProject,
                this.lineSpear,
                this.date[0],
                this.date[1]
              );
            } else {
              this.getConstructionProgressApi(this.currentPage - 1, this.pageSize);
            }
            this.currentPage = this.currentPage - 1;
          } else {
            if (this.isSearch === true) {
              this.getConstructionProgressApi(
                this.currentPage,
                this.pageSize,
                this.belongProject,
                this.lineSpear,
                this.date[0],
                this.date[1]
              );
            } else {
              this.getConstructionProgressApi(this.currentPage, this.pageSize);
            }
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}

.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  width: 13.7%;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 10px;
}
</style>
